<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
</head>
<body>
<nav id="nav">
    <li>
        <span></span>
        <p>京东会员</p>
    </li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        // $("span").mouseenter(function(){
        //     // $(this)  代表span  next() 相邻的下一个元素
        //     $(this).next().show();
        // });

        // $("span").mouseleave(function(){
        //     $(this).next().hide();
        // });

        // 绑定单个事件
        //$("span").bind("mouseenter",function(){})


        // 绑定多个事件
        // $("span").bind({
        //     "mouseenter":function(){
        //         $(this).next().show();
        //     },
        //     "mouseleave":function(){
        //         $(this).next().hide();
        //     }
        // })
        // // 移除当前元素的所有事件
        // $("span").unbind();

        // $("span").hover(
        //     function(){

        //     },
        //     function(){

        //     }
        // );

        $("span").hover(
            function(){
                $(this).next().show();
            },
            function(){
                $(this).next().hide();
            }
        );

    })
</script>
</body>
</html>